<template>
  <div>
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
              <el-form-item label="分组名称" prop="name">
                <el-input v-model="queryParams.name" type="text" placeholder="请输入名称" clearable/>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="queryParams.remark" type="text" placeholder="请输入备注" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
                <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
              </el-form-item>
      </el-form>
      <div style="margin-bottom: 10px;">
        <el-button type="success" :icon="Plus" @click="handleAddRow({})">
            新增
        </el-button>
        <el-button type="primary" :icon="Delete" @click="handleDelete({})">
            批量删除
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" min-width="100"></el-table-column>
        <el-table-column label="分组名称" prop="name" min-width="100"></el-table-column>
        
        <el-table-column label="备注" prop="remark" min-width="100">
          <template #default="scope">{{ scope.row.remark || '--' }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt" min-width="160">
          <template #default="scope">
            {{ scope.row.createdAt ? formatDate(scope.row.createdAt) : '--'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-dropdown @command="handleClickBatch($event, 'Row', scope.row)">
              <span class="el-dropdown-link">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="['10', '20', '30', '50', '100']"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    <add-form ref="formRef" @refresh="handleQuery"></add-form>
    <DelDialog ref="delDialogRef" @refresh="handleQuery"></DelDialog>
  </div>
</template>


<script setup>
import {
  Plus,
  Delete,
} from "@element-plus/icons-vue";
import addForm from './form.vue';
import { getData, delIds } from "@/api/equipmentManagement/numberManage/grouping.api";
import useToggle from "@/hooks/useToggle";
import { formatDate } from "@/utils";
import { useParamStore } from '@/store'
import DelDialog from '@/components/equipmentManagementTemplate/NumberManage/delDialog.vue'
const route = useRoute();
const { setParams, getParams, removeFalsyValues } = useParamStore()
const name = route.fullPath
onMounted(() => {
  if(!!getParams(name)) {
    queryParams.value = getParams(name)
  }
  getList()
})
const [loading, _, setLoading] = useToggle();

const queryParams = ref({
  app: 'WA',
  name: void undefined,
  remark: void undefined,
})

const paging = ref({
  size: 10,
  page: 1,
  total: 0,
});

const tableData = ref([]);

const handleSizeChange = (e) => {
  paging.value.size = e;
  handleQuery()
};
const handleCurrentChange = (e) => {
  paging.value.page = e;
  handleQuery()
};

const ids = ref([]);
const handleSelectionChange = (e) => {
  ids.value = e.map((item) => item.id);
}

const getList = async () => {
  try {
    setLoading(true);
    const res = await getData({
      ...queryParams.value,
      page: paging.value.page,
      size: paging.value.size,
    })
    paging.value.total = res.count;
    tableData.value = res.rows;
    setLoading(false);
  } finally {
    setLoading(false);
  }
}

const handleQuery = () => {
  paging.value.page = '1'
  paging.value.size = '10'
  setParams(queryParams.value, name)
  getList()
};

const queryFormRef = ref(null);
const handleResetQuery = () => {
  if (!queryFormRef.value) return
  queryFormRef.value.resetFields()
  handleQuery()
}

const delDialogRef = ref(null);
const handleClickBatch = (command, type, row) => {
  const commands = {
    edit: () => handleAddRow(row),
    delete: () => delDialogRef.value.init(row, []),
  }[`${command}`]

  return commands && commands();
}

const handleDelete = (row) => {
  if(!row.id && ids.value.length === 0) return ElMessage.warning('请选择要删除的记录');
  delDialogRef.value.init(row, ids)
};

const formRef = ref(null);
const handleAddRow = (row) => {
  console.log(formRef.value);
  formRef.value.handleOpen(row)
}
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
